// 全局指令 （插件的方式）
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
const directivePlugin = {
  install (app) {
    // app.directive()
    // 使用全局指令的方式编写一个图片懒加载指令
    // 图片懒加载思路: 图片进入视口才发送网路请求(数据的url交给img.src属性)
    app.directive('lazyload', {
      mounted (el, binding) {
        // console.log(el, binding.value)
        // stop: 可执行的方法 用来停止对于元素的监听
        const { stop } = useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // isIntersecting 布尔值  进入到视口区域就是true 出去就是false
            // 只要进入和出去都会重新执行回调
            // 在这里组件进入到了视口区域 isIntersecting true  -> 发请求
            // 一旦进入到视口一次之后 请求已经发送了一次 就应该立刻停止监听
            if (isIntersecting) {
              // 容错处理 当图片正式的url加载出问题的时候使用默认图片占位置
              el.error = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 停止监听
              stop()
            }
          },
          // 监听的元素刚进入视口区域就立刻触发回调函数
          { threshold: 0 }
        )
      }
    })
  }
}

export default directivePlugin

/**
 * 懒加载
 * 网络层面的性能优化
 *   1. 路由懒加载(网络)
 *      如果不做懒加载 不管我们看不看对应的路由模块 都会在应用打开的时候一次性把所有的js包加载进来
 *      首次应用打开的时间就会很长
 *      做了以后,只有用到的资源文件才会被加载 大大加快应用首次打开的速度
 *      减少包体积 -> 减少应用打开时间
 *
 *   2. 组件数据懒加载(网络 + 渲染)
 *      假如不做  不管你用不用到这个组件 都会去加载数据  都会造成响应式数据发生变化 都会让视图重新渲染
 *      做了 什么时候真正用到这个组件了 什么时候才会进行数据加载二次重新渲染
 *
 *   3. 图片懒加载(网络)
 *      如果不做 由于大家都是http请求 形成一个竞态关系
 *      同时只能发送6个请求
 *      不太重要的图片请求优先发送  而包含了重要数据的ajax被挤掉了
 */
